<button class="toggle-button filter-button" #matMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="matMenu"><i class="{{icon}}"></i> {{dataLabel()}}<a class="cancel-tag" *ngIf="dataActive();" (click)="resetData($event, form);"><i class="moon-Close"></i></a></button>
<mat-menu #matMenu="matMenu">
  <div class="search-bar" (click)="$event.preventDefault(); $event.stopPropagation();" *ngIf="searchable">
    <div class="icon"><i class="moon-Search"></i></div>
    <input spellcheck="false" type="text" placeholder="Search" (input)="searchContent($event)" />
    <div class="clear"></div>
  </div>
  <div class="filter-menu" (click)="$event.preventDefault(); $event.stopPropagation();">
    <ng-container *ngIf="!categories || categories.length === 0">
      <ng-container *ngFor="let element of data">
        <ng-container *ngIf="element.show">
          <mat-checkbox (click)="$event.stopPropagation();" (change)="element.value = $event.checked; updateValue($event, data, form);" [checked]="element.value"></mat-checkbox><span>{{element.name}}</span>
          <br>
        </ng-container>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="categories && categories.length > 0">
      <ng-container *ngFor="let category of categories">
        <small class="category">{{category}}</small><br>
        <ng-container *ngFor="let element of data">
          <ng-container *ngIf="element.show && element.category === category">
            <mat-checkbox (click)="$event.stopPropagation();" (change)="element.value = $event.checked; updateValue($event, data, form);" [checked]="element.value"></mat-checkbox><span>{{element.name}}</span>
            <br>
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>
  </div>
  <hr (click)="$event.preventDefault(); $event.stopPropagation();">
  <div class="menu-buttons" (click)="$event.preventDefault(); $event.stopPropagation();">
    <button class="btn-control" (click)="trigger?.closeMenu(); applyCallback($event, data, form);">Apply</button>
    <a (click)="trigger?.closeMenu();">Cancel</a>
  </div>
</mat-menu>
